<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="./css/style.min.css">
    <title>个人信息</title>
</head>
<script type="text/javascript">
    window.onload=function () {
            document.addEventListener('touchstart',function (event) {
                if(event.touches.length>1){
                    event.preventDefault();
                }
            })
            var lastTouchEnd=0;
            document.addEventListener('touchend',function (event) {
                var now=(new Date()).getTime();
                if(now-lastTouchEnd<=300){
                    event.preventDefault();
                }
                lastTouchEnd=now;
            },false)
        }
</script>

<body>
    <div id="personal_center">
        <div class="t-container">
            <header class="cl" v-show="header.show">
                <div class="nav-bar cl">
                    <span class="goback arrow_l" @click="goback"></span>
                    <span class="page-name" v-cloak>{{user.belong_shop_name}}会员店</span>
                </div>
            </header>
            <div class="t-main">
                <div class="t-header t-p-info-header smodify-head-icon">
                    <div class="t-header-box">
                        <form :action="frm_action" method="post" encType="multipart/form-data" id="uploadFileForm" >
                            <input type="hidden" name="rootPath" value="member">
                            <input type="file" name="file" value="" class="smodify-file" @change="modifyHeadIcon($event)">
                        </form>
                        <div class="t-head-portrait">
                            <img :src="user.avatar" alt="">
                        </div>
                        <div class="t-head-message t-p-info-header-msm">
                            <p v-cloak>{{user.name}}</p>
                            <p v-cloak>{{user.mobile}}</p>
                        </div>
                        <div class="t-head-account">
                            <a href="javascript:void(0)">修改头像<i class="t-account-icons"></i></a>
                        </div>
                    </div>
                </div>
                <div class="t-gap-box"></div>
                <div class="t-column">
                    <div class="t-column-title" @click="modifyName">
                        <p>用户姓名</p>
                        <span class="t-column-span t-per-span" v-cloak>{{user.name}}</span>
                        <a href="javascript:void(0)">修改<i class="t-account-icons"></i></a>
                    </div>
                </div>
                <div class="t-column">
                    <div class="t-column-title" @click="goto('modify-tel.html?tel='+user.mobile+'&storeid='+store_id)">
                        <p>手机号</p>
                        <span class="t-column-span t-per-span" v-cloak>{{user.mobile}}</span>
                        <a href="javascript:void(0)">修改<i class="t-account-icons"></i></a>
                    </div>
                </div>
                <div class="t-column">
                    <div class="t-column-title" @click="goto('modify-password.html?storeid='+store_id)">
                        <p>登录密码</p>
                        <a href="javascript:void(0)">修改<i class="t-account-icons"></i></a>
                    </div>
                </div>
            </div>
            <div class="t-footer return-footer add-footer"><a href="javascript: void(0)" class="form-btn form-btn-a" @click="loginout"><span>{{btn_txt}}</span></a></div>
        </div>
        <confirm ref="confirm"></confirm>
        <toast ref="toast"></toast>
    </div>
    <script src="./js/lib/vue.js"></script>
    <script src="http://static.jdhui.com/lib/vue-resource/1.2/vue-resource.js"></script>
    <script src="./js/min/config.min.js"></script>
    <script src="./js/min/common.min.js"></script>
    <script src="./js/min/component.min.js"></script>

    <script>
        var toast = component.popup.toast();
            confirm = component.popup.confirm({
                name: 'confirm',
                type: 'confirm'
            })
        var perinfo = new Vue({
            el: '#personal_center',
            data: {
                header: {
                    show: !APP.iswechat()
                },
                user: {},
                store_id: APP.getQueryString('storeid'),
                frm_action:APIUploadImg+"file/uploadImg?windowname=1",
                btn_txt:"",
                name:""
            },
            mounted: function() {
                Vue.http.post(APIPHP + 'index.php?r=member/u/index', {
                    storeid: this.store_id
                }, {
                    emulateJSON: true
                }).then(function(_res) {
                    if (_res.body.error_code == 200) {
                        this.user = _res.body.data;
                        this.btn_txt="退出登录"
                    } else if (_res.body.error_code == 400) {
                        this.btn_txt="登录"
                    }
                }.bind(this), function(err) {
                    console.log("err")
                })
            },
            components: {
                'toast': toast,
                'confirm': confirm
            },
            methods: {
                goback: function() {
                    window.history.go(-1);
                },
                goto: function(url) {
                    window.location.href = url;
                },
                modifyName: function() {
                    this.$refs.confirm.show({ 
                        content: '<input class="stext-center-input"  placeholder="请输入新用户名" id="text_input" />',                  
                        confirm: function(){
                            var _p = document.getElementById("text_input").value;
                            console.log(_p);
                            if (_p == '') {
                                this.$refs.toast.show('新用户姓名不能为空');
                                return true;
                            }
                            Vue.http.post(APIPHP + 'index.php?r=member/u/edit-nickname&storeid=' + this.store_id, {
                                name: _p
                            }, {
                                emulateJSON: true
                            }).then(function(_res) {
                                if (_res.body.flag == 1) {
                                    this.$refs.toast.show('修改成功');
                                    this.user.name = _p;
                                } else {
                                    this.$refs.toast.show('修改失败');
                                }
                            }.bind(this));
                            
                        }.bind(this)
                   }) 
                },
                modifyHeadIcon: function(e) {
                    Vue.http.post(APIUploadImg + 'file/uploadImg', new FormData(document.getElementById('uploadFileForm')), {
                        credentials: false
                    }).then(function(_res) {
                        var _imgurl = _res.body.source;
                        Vue.http.post(APIPHP + 'index.php?r=member/u/edit-avtar&storeid=' + this.store_id, {
                            avatar: _imgurl
                        }, {
                            emulateJSON: true
                        }).then(function(data) {
                            if (data.body.flag == 1) {
                                this.$refs.toast.show('上传成功');
                                this.user.avatar = JDHIMG + _imgurl;
                            } else {
                                this.$refs.toast.show('上传失败');
                            }
                        }.bind(this));
                    }.bind(this));
                },
                loginout: function() {
                    if (this.btn_txt=="退出登录") {
                            Vue.http.get(APIPHP + 'index.php?r=home/index/login-out&storeid=' + this.store_id, {}, {
                            emulateJSON: true
                        }).then(function(_res) {
                            if (_res.body.flag == 1) {
                                this.$refs.toast.show('退出成功');
                                setTimeout(function() {
                                    window.location.href = 'home.html?storeid=' + this.store_id;
                                }.bind(this), 2000);
                            } else {
                                this.$refs.toast.show('退出失败');
                            }
                        }.bind(this));
                    } else {
                        window.location.href="login.html?storeid="+this.store_id;
                    }
                    
                }
            }
        })
    </script>
</body>

</html>